<template>
    <div>
        <el-card shadow="never">
            <div slot="header">动态表单(tree)</div>
            <DynamicForm :schema="schema" :formData="formData"></DynamicForm>
        </el-card>
        <div class="markdown-body">
            <CodeTpl></CodeTpl>
        </div>

        <el-dialog
            title="添加子节点"
            :visible.sync="dialogVisible">
            <DynamicForm ref="sf" :schema="treeSchema" :show-submit="false">
                <template v-slot:submit="scope">
                    <div style="text-align: right;">
                        <el-button @click="dialogVisible = false">取 消</el-button>
                        <el-button type="primary" @click="treeAppend(scope)">确 定</el-button>
                    </div>
                </template>
            </DynamicForm>
        </el-dialog>
    </div>
</template>

<script>
const list = [{
    id: 1,
    label: '一级 1',
    children: [{
        id: 4,
        label: '二级 1-1',
        children: [{
            id: 9,
            label: '三级 1-1-1'
        }, {
            id: 10,
            label: '三级 1-1-2'
        }]
    }]
}, {
    id: 2,
    label: '一级 2',
    children: [{
        id: 5,
        label: '二级 2-1'
    }, {
        id: 6,
        label: '二级 2-2'
    }]
}, {
    id: 3,
    label: '一级 3',
    children: [{
        id: 7,
        label: '二级 3-1'
    }, {
        id: 8,
        label: '二级 3-2',
        children: [{
            id: 11,
            label: '三级 3-2-1'
        }, {
            id: 12,
            label: '三级 3-2-2'
        }, {
            id: 13,
            label: '三级 3-2-3'
        }]
    }]
    }
];
let id = 100;
import CodeTpl from './md/tree.md';

export default {
    components: {
        CodeTpl
    },
    data() {
        return {
            uuid: 1,
            schema: {
                properties: {
                    num1: {
                        label: '基本用法',
                        widget: 'tree',
                        enum: [...list]
                    },
                    num2: {
                        label: '可选值',
                        widget: 'tree',
                        enum: [...list],
                        props: {
                            leafOnly: true
                        },
                        ui: {
                            showCheckbox: true,
                            nodeKey: 'id'
                        }
                    },
                    num3: {
                        label: '异步',
                        widget: 'tree',
                        asyncData(resolve) {
                            setTimeout(() => {
                                resolve([...list])
                            }, 2000)
                        },
                    },
                    num4: {
                        label: '懒加载',
                        widget: 'tree',
                        ui: {
                            showCheckbox: true,
                            nodeKey: 'id',
                            lazy: true,
                            load: (node, resolve) => {
                                let { uuid } = this;
                                setTimeout(() => {
                                    let arr = uuid < 5 ? [{
                                        id: uuid,
                                        label: `${uuid}级`,
                                    }] : [];
                                    resolve(arr)
                                    this.uuid += 1
                                }, 1000)
                            }
                        }
                    },
                    num5: {
                        label: '新增',
                        widget: 'tree',
                        enum: [{
                            id: id,
                            label: '第一级'
                        }],
                        props: {
                            leafType: 'node'
                        },
                        ui: {
                            showCheckbox: true,
                            nodeKey: 'id',
                            renderContent: this.renderContent
                        },
                        col: {
                            span: 24
                        }
                    }
                },
                grid: {
                    col: {
                        span: 12
                    }
                }
            },
            formData: { 
                num2: [5]
            },

            dialogVisible: false,
            treeSchema: {
                properties: {
                    label: {
                        label: '节点名称',
                        widget: 'input',
                        rules: [
                            {required: true, message: '请输入节点名称', trigger: 'blur'}
                        ],
                        ui: {
                            placeholder: '请输入节点名称'
                        }
                    }
                }
            },
            openTreeNode: null
        }
    },
    computed: {
        sf() {
            return this.$refs.sf
        }
    },
    methods: {
        renderContent(h, { node, data, store }) {
            return (
                <span>
                    <span>{node.label}</span>
                    <span>
                        <el-button size="mini" type="text" 
                            icon="el-icon-plus"
                            on-click={ () => this.openAppend(data) }></el-button>
                        <el-button size="mini" type="text" 
                            icon="el-icon-delete"
                            on-click={ () => this.remove(node, data) }></el-button>
                    </span>
                </span>);
        },
        append(data, values) {
            const newChild = { id: id++, label: values.label, children: [] };
            if (!data.children) {
                this.$set(data, 'children', []);
            }
            data.children.push(newChild);
        },

        remove(node, data) {
            const parent = node.parent;
            const children = parent.data.children || parent.data;
            const index = children.findIndex(d => d.id === data.id);
            children.splice(index, 1);
        },
        openAppend(data) {
            this.dialogVisible = true;
            this.openTreeNode = data;
        },
        treeAppend({values}) {
            this.sf.form.validate((valid, error) => {
                if(valid) {
                    if(this.openTreeNode) {
                        this.append(this.openTreeNode, values);
                        this.dialogVisible = false;
                    }
                }
            })
        }
    },
}
</script>

<style>

</style>